<script setup lang="ts">
const { isLogin } = useAuth()
</script>

<template>
  <main class="bg-slate-200 shadow-lg border-b-4 border-b-red-600">
    <div class="flex justify-between 2xl:w-page h-[60px] m-auto items-center">
      <section class="flex items-center gap-5">
        <RouterLink to="/" class="flex items-center gap-1">
          <icon-youtube theme="outline" size="32" fill="#333" />
          <span class="font-bold">houdunren</span>
        </RouterLink>
        <RouterLink :to="{ name: 'system.index' }" class="flex items-center gap-1"> 系统课程 </RouterLink>
        <RouterLink :to="{ name: 'lesson.index' }" class="flex items-center gap-1"> 碎片课程 </RouterLink>
        <RouterLink :to="{ name: 'video.index' }" class="flex items-center gap-1"> 最近更新 </RouterLink>
        <RouterLink :to="{ name: 'topic.index' }" class="flex items-center gap-1"> 互动交流 </RouterLink>
        <RouterLink :to="{ name: 'topic.index' }" class="flex items-center gap-1"> 在线文档 </RouterLink>
      </section>
      <section>
        <div v-if="isLogin()">
          <UserAvatarMenu />
        </div>
        <div v-else>
          <el-button type="primary" size="default" @click="$router.push({ name: 'login' })">登录</el-button>
        </div>
      </section>
    </div>
  </main>
</template>
<style lang="scss" scoped>
a {
  @apply gap-2 text-gray-800 font-bold;
}
</style>
